$(function(){ 	 	  
	  $('#films').datagrid({
	      url: 'viewFilm',
	      method:'get',
	      rownumbers:true,
	      pagination:true,
	      pageSize:20,
	      pageList:[10,20,30],
	      fitColumns:true,
	      autoRowHeight:true,
	      singleSelect:true,
	      striped:true,
	      idField:'id',
	      columns:[[
			  {field:'id', title:'Film Id'},
	          {field:'title', title:'Film Title', sortable:true},
	          {field:'actorSet', title:'Actors', formatter:function(value, row){
	              var actors = row.actors;
			  	  var str = '';
			  	  var name;
			  	  for(var i = 0; i < actors.length; i++){
				  	name = actors[i].name.firstName + '_' + actors[i].name.lastName;

					//show 5 actors each sub row
				  	if((i + 1) % 5 === 0){
						str = str + '<br />';
					}
					
					if(i < actors.length - 1){
						str = str + name + ', ';
					}else{
						str = str + name;
					}
				  }
			  	  return str;
	          }},
	          {field:'category.name', title:'Category', sortable:true, formatter:function(value, row){
	              return row.category.name;
	          }},
	          {field:'language.name', title:'Language', sortable:true, formatter:function(value, row){
	                  return row.language.name;
	          }},
	          {field:'releaseYear', title:'ReleaseYear', width:50, sortable:true},
	          {field:'rating', title:'Rating', sortable:true},
	          {field:'opt1', title:'', formatter:function(value, row, index){
	        	  return '<a href=\"javascript:void(0)\" onclick=\"viewInventory(' + index + ', 1)\">View Inventory</a>';
	          }},
	          {field:'opt2', title:'', formatter:function(value, row, index){
	        	  return '<a href=\"javascript:void(0)\" onclick=\"edit(' + row.id + ')\">Edit</a>';
	          }}
	          ]]
	   });

	  $('#oneFilm').datagrid({
		  autoLoad:false,
	      url: 'viewFilmById',
	      method:'get',
	      fitColumns:true,
	      autoRowHeight:true,
	      idField:'id',
	      columns:[[
			  {field:'id', title:'Film Id'},
	          {field:'title', title:'Film Title', sortable:true},
	          {field:'actorSet', title:'Actors', formatter:function(value, row){
	              var actors = row.actors;
			  	  var str = '';
			  	  var name;
			  	  for(var i = 0; i < actors.length; i++){
				  	name = actors[i].name.firstName + '_' + actors[i].name.lastName;

					//show 5 actors each sub row
				  	if((i + 1) % 5 === 0){
						str = str + '<br />';
					}
					
					if(i < actors.length - 1){
						str = str + name + ', ';
					}else{
						str = str + name;
					}
				  }
			  	  return str;
	          }},
	          {field:'category.name', title:'Category', sortable:true, formatter:function(value, row){
	              return row.category.name;
	          }},
	          {field:'language.name', title:'Language', sortable:true, formatter:function(value, row){
	                  return row.language.name;
	          }},
	          {field:'releaseYear', title:'ReleaseYear', width:50, sortable:true},
	          {field:'rating', title:'Rating', sortable:true},
	          {field:'opt1', title:'', formatter:function(value, row, index){
	        	  return '<a href=\"javascript:void(0)\" onclick=\"viewInventory(' + index + ', 2)\">View Inventory</a>';
	          }},
	          {field:'opt2', title:'', formatter:function(value, row, index){
	        	  return '<a href=\"javascript:void(0)\" onclick=\"edit(' + row.id + ')\">Edit</a>';
	          }}
	          ]]
	   });
	  
	  //create easyui table first but do nothing.... 't1
	  $('#inventory').datagrid({
			autoLoad:false
		});
	  
	  $('#returnFilmTable').click(function(){
		  $('html, body').animate({
		        scrollTop: $('#film').offset().top
		    }, 1500);
	  });
}); 

function doSearch(){
    $('#films').datagrid('load',{
    	filmId: $('#filmId').val(),
        titleName: $('#titleName').val(),
        actorName: $('#actorName').val(),
        categoryId: $('#categoryId').combobox('getValue')
    });
}

function doIdSearch(){
    $('#oneFilm').datagrid('load',{
    	filmId: $('#filmId').val()
    });
}

function viewInventory(rowIndex, tableIndex){
	var tableId;
	switch(tableIndex){
		case 1:
			tableId = '#films';
			break;
		case 2:
			tableId = '#oneFilm';
			break;
	}
	var current_row = $(tableId).datagrid('getRows')[rowIndex];
	//location.hash = '#download';
	var actorNames = '';
	var temp;
	for(var i = 0; i < current_row.actors.length; i++){
	  	temp = current_row.actors[i].name.firstName + '_' + current_row.actors[i].name.lastName;
		if(i < current_row.actors.length - 1){
			actorNames = actorNames + temp + ', ';
		}else{
			actorNames = actorNames + temp;
		}
	  }
	
	                       //set film info
	$('#filmInfo .row:first').next().find('h2').text(current_row.title)
							.parent().parent().next().children('div :last').text(actorNames)
							.parent().next().children('div :last').text(current_row.description + '.')
							.parent().next().children('div :eq(1)').text(current_row.releaseYear)
											.siblings('div :last').text(current_row.language.name)
							.parent().next().children('div :eq(1)').text(current_row.length)
											.siblings('div :last').text(current_row.rating)
							.parent().next().children('div :last').text(current_row.specialFeatures)
							
							//set rent info
							.parent().next().children('div :last')//title, just ignore
							.parent().next().children('div :last').text('$' + current_row.rentalRate)
							.parent().next().children('div :last').text('Day ' + current_row.rentalDuration);
	
	//'t1...recreate the easyui table and fetche the data
	$('#inventory').datagrid({
		url:'viewFilmInventory?detail=true&filmId=' + current_row.id,
		method:'get',
		rownumbers:true,
		fitColumns:true,
		autoRowHeight:true,
		singleSelect:true,
		striped:true,
		idField:'id',
		columns:[[   
		   {field:'id', title:'Store Id', hidden:true}, 
		   {field:'store.address.address1', title:'Store Address', width:150, formatter:function(value, row){
			   return row.store.address.address1;
		   }},
		   {field:'totalInventoryCount', title:'Total Count in Inventory', width:150, formatter:function(value, row){
			   return row.totalInventoryCount;
		   }},
		   {field:'rentCount', title:'Rent Count', width:150, formatter:function(value, row){
			   return row.rentCount;
		   }},
		   {field:'available', title:'Avaliable in Inventory', width:150, formatter:function(value, row){
			   return row.totalInventoryCount - row.rentCount;
		   }}
		]]
	});
/*	$('#inventory').datagrid('load', {
		filmId: row.id
	});*/
	
	$('html, body').animate({
        scrollTop: $('#filmInfo').offset().top
    }, 1500);
}

function edit(filmId){
	alert(filmId);
}